<template>
	<el-card shadow="0" >
		<!-- 查询条件-->
		<el-row :gutter="10">
			<el-col :span="6">
				<el-input placeholder="请输入菜单名称" v-model="queryInfo.name"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
			</el-col>
		</el-row>
		<div style="margin-top: 5px;">
			<el-col >
				<el-button  @click="openAddDialog()"
					type="primary" icon="el-icon-plus">新增</el-button>
			</el-col>
		</div>
		<el-table :data="tableData"  style="width: 100%;">
			<el-table-column align="center"  prop="name" label="菜单名称" ></el-table-column>
			<el-table-column align="center" prop="url" label="菜单地址" ></el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="openUpdateDialog(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="queryInfo.pageNum"
		      :page-sizes="[4, 6, 8, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		</div>
	</el-card>
</template>

<script>
	import AddMenu from './AddMenu.vue';
	import UpdateMenu from './UpdateMenu.vue';
	export default{
		components:{
			AddMenu,
			UpdateMenu,
		},
		data() {
		    return {
		        tableData: [],
				total:0,
				queryInfo:{
					pageNum:1,
					pageSize:4,
					name:"",
				}
		    }
		},
		methods: {
			search(){
				this.queryInfo.pageNum=1;
				this.findMenus();
			},
			formatterTime(row,column,cellValue,index){
				var date = new Date(cellValue);
				return date.toLocaleString();
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize=val;
				this.queryInfo.pageNum=1;
				this.findMenus();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum=val;
				this.findMenus();
			},
			findMenus(){
				//自动向后端加载角色列表数据
				this.$http.post("admin/menuCtl/findMenuList",this.queryInfo).then((resp)=>{
					console.log(resp.data);
					this.tableData = resp.data.data;
					this.total = resp.data.total;
				})
			},
			
		},
		mounted(){
			 //自动向后端加载角色列表数据
			this.findMenus();
		}
	}
</script>

<style>
</style>
